import React from 'react';
import { connect } from 'react-redux';
import {
    TopicWrapper,
    TopicItem,
} from '../style';

const Topic = (props) => (
    <TopicWrapper>
        {
            props.list.map((item) => {
                return (
                    <TopicItem key={item.get("id")}>
                        <img alt={item.get("title")} className="topic-pic" src={item.get("imgUrl")}/>
                        {item.get("title")}
                    </TopicItem>
                );
            })
        }
    </TopicWrapper>
);

const mapStateToProps = (state) => ({
    list: state.get("home").get("topicList")
});
const mapDispatchToProps = null;

export default connect(mapStateToProps, mapDispatchToProps)(Topic);